
import { v4 as uuidv4 } from 'uuid'
import chinaJSON from '@/utils/china.json'
export default {
  data() {
    return {
      selectedData: '', // 当前选中的地图数据
      showMapDetail: false, // 查看地图详情,
      windowSize: [0, 0],
      geoData: [], // 地图区域数据
      chartId: `map-${uuidv4()}`,		// 用UUID生成图表id，防止id重复
      chart: { map: null, chartData: [] },
      mapName: 'china', // 地图名称
      mapOption: {
        geo: {
          map: 'china',
          layoutCenter: ['50%', '70%'],
          layoutSize: 330, // 如果宽高比大于 1 则宽度为 330，如果小于 1 则高度为 330，保证了不超过 330x330 的区域
          label: { show: false }, // 是否显示对应地名
          roam: false,
          focus: 'self',
          itemStyle: {
            normal: {
              borderWidth: 1, // 地图边框宽度
              borderColor: '#fff', // 地图边框颜色
              areaColor: '#DDDDDD' // 地图颜色：淡蓝色 #D9EBFE
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              },
              areaColor: '#4DA7FF', // 高亮时(选中时)的样式 ：深蓝色
              borderWidth: 2
            }
          },
          select: {
            label: {
              show: false
            },
            itemStyle: {
              areaColor: '#4DA7FF' // 选中的颜色:深蓝色 #4DA7FF
            }
          },
          blur: {
            label: {
              show: false
            }
          },
          silent: false
          /* regions: [ // 对特定区域进行配置，影藏南海诸岛
            {
              name: '南海诸岛',
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0 // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ] */
        },
        tooltip: {
          triggerOn: 'mousemove',
          trigger: 'item',
          extraCssText: 'background:transparent;border:none;',
          show: false
        },
        dataRange: {
          x: 'left',
          y: 'bottom',
          // splitList控制线与点的颜色，start意思是大于等于，end是小于等于，当满足条件时可以改变颜色,这里是通过linedata与pointsdata，来改变的
          splitList: [
            { start: 800, color: '#48A5FF' },
            { start: 300, end: 800, color: '#7ABDFF' },
            { start: 100, end: 300, color: '#B7DCFF' },
            { start: 1, end: 100, color: '#E4F1FF' },
            { end: 1, color: '#DDDDDD' }
          ],
          color: ['#48A5FF', '#E4F1FF'],
          show: false
        },
        series: [
          {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            silent: true,
            aspectScale: 0.75,
            tooltip: { show: false },
            data: [],
            label: {
              show: false
            }
          }
        ]
      },
      activeMapIndex: ''
    }
  },
  watch: {
    windowSize() {
      this.chart.map.resize()
    }
  },
  created() {
    // 注册中国地图
    this.$echarts.registerMap(this.mapName, { geoJSON: chinaJSON })
  },
  mounted() {
    this.initChart()
    this.$nextTick(() => {
      this.drawChart()
    })
  },
  methods: {
    initChart() {
      this.windowSize = [document.body.clientWidth, document.body.clientHeight]
      window.addEventListener('resize', () => {
        this.windowSize = [document.body.clientWidth, document.body.clientHeight]
      })
      this.chart.map = this.$echarts && this.$echarts.init(document.getElementById(this.chartId))
    },
    async drawChart() {
      if (this.chart.map) {
        this.chart.map.dispatchAction({
          type: 'hideTip'
        })
      }
      this.chart.map.showLoading({
        color: '#12B9A3',
        fontFamily: 'PFZH',
        textColor: '#CCCCCC',
        fontSize: 14,
        lineWidth: 2
      })
      /*
      // const geoCoordMap = {}
      const mapFeatures = this.$echarts.getMap(this.mapName).geoJson.features	// 获取全国地区的经纬度（只包含了一级城市、省份经纬度）
      console.log('mapFeatures', mapFeatures)
      mapFeatures.forEach(function(v) { // 获取一级城市、省份经纬度
        const name = v.properties.name // 地区名称
        geoCoordMap[name] = v.properties.center // 地区经纬度
      })
      // console.log('geoCoordMap', geoCoordMap)
      */
      this.geoData = await this.getgeoData()
      const mapOption = this.mapOption
      mapOption.series[0].data = this.geoData
      this.chart.map.clear()
      this.chart.map.setOption(mapOption)
      this.chart.map.hideLoading()			// 隐藏loading样式
      this.$nextTick(() => { this.chart.map.resize() })

      this.chart.map.on('mouseover', (params) => {
        // 取消高亮
        this.chart.map.dispatchAction({
          type: 'downplay',
          dataIndex: params.dataIndex
        })
        /* if (!params.data || !params.data.value) {
          // 取消高亮
          this.chart.map.dispatchAction({
            type: 'downplay',
            dataIndex: params.dataIndex
          })
          return
        } */
        /* if (params.componentType === 'series' && params.data && params.data.value) {
          // 查看详情
          this.handleOpenMapDetail(params.data)
        } */
      })
      // 点击事件
      this.chart.map.on('off')
      this.chart.map.on('click', (params) => {
        /* // 取消选中
        this.chart.map.dispatchAction({
          type: 'unselect',
          dataIndex: params.dataIndex
        }) */

        if (params.componentType === 'series' && params.data && params.data.value) {
          // 查看详情
          this.activeMapIndex = params.dataIndex
          this.handleOpenMapDetail(params.data)
        } else {
          // 取消选中
          this.chart.map.dispatchAction({
            type: 'unselect',
            dataIndex: params.dataIndex
          })
        }
      })
    },
    // 取消地图指定区域的选中
    clearMapSelect() {
      this.chart.map.dispatchAction({
        type: 'unselect',
        dataIndex: this.activeMapIndex
      })
    }
  }
}
